---
id: debounce&throttle
title: 区分函数防抖&函数节流
sidebar_label: '区分函数防抖&函数节流'
tags: [函数防抖，函数节流]
keywords:
    - 函数防抖
    - 函数节流
author: 白纸
author_title: Front End Engineer @SNBC
author_url: https://github.com/algate
author_image_url: /img/manoeasy.jpeg
description: 区分函数防抖&函数节流
hide_table_of_contents: false
---
:::note 文档说明
😊 如何区分函数防抖和函数节流
:::

### 1. 概念区分

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs
    defaultValue="debounce"
    values={[
        { label: "函数防抖", value: "debounce" },
        { label: "函数节流", value: "throttle" }
    ]}
>
<TabItem value="debounce">
函数防抖：触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。

:::tip 函数防抖
频繁触发, 但只在特定的时间内才执行一次代码，如果特定时间内重新触发，break打断之后重新开始执行;
:::
</TabItem>
<TabItem value="throttle">
函数节流：在极少数情况下，函数的触发不是由用户直接出发的。在这些情况下，函数有可能被频繁的调用，造成大的性能问题

:::tip 函数节流
频繁触发，只在特定的时间内执行一次，continue继续执行完;
:::
</TabItem>
</Tabs>

### 2. 原理区分

**看定义，你可能一会就忘记了，什么是函数防抖，什么是函数节流，最容易出错的就是函数防抖和函数节流还给混淆了。**

今天看了，明天就把函数防抖和函数节流给搞反了。这是事实，不过我发现了小巧门，就跟初中、高中的数学公式一样。不用死记硬背，搞懂原理，顺着原理就推导出来，谁还记概念呢！

咋们举个网上绝无仅有的例子，唯我独创，哈哈，自恋了！

***

**<font color="red" size="4">就拿咋用苍蝇拍打苍蝇一样，什么时候是函数防抖，什么时候是函数节流呢?</font>**

***
**当你看电视的时候，两只苍蝇在电视机屏幕上来回的移动，实在是烦。于是你拿起了你手旁的苍蝇拍，准备把该死的苍蝇拍死在电视机上。**
假设，拍打一次算一次特定的时间，拍打一次还打住了苍蝇算函数完成。

1. 我们拍打一次算一次完整的执行动作；
2. 假设苍蝇一直在不停的起飞，重新降落；我们的手还没打下去，苍蝇就重新换位置了，如此重复；怕打坏电视屏幕，我们的手一直处于拍打前的抖动状态，防止我们的手因为苍蝇的移动，不敢拍下去，而处于一种抽搐的状态。

**<font color="#2dabff" size="4">函数防抖：</font>**就是等苍蝇落稳了，我们进行一次拍打动作，如果苍蝇飞走了，我们停在半空的手，没有拍打到电视上，重新处于拍打前的状态。**（拍打一次算一次特定的时间，此时还没有拍下去）。**

>对应的解释：拍打一次算一次的特定的时间，如果苍蝇飞走了，此时苍蝇拍还没有拍下，我们重新拍打苍蝇，还没拍下，苍蝇又飞走了，如此周而复始，我们一直处于抖动状态，所以，我们拍打到苍蝇飞走，如果算一个特定的时间，那么我们的手就一直处于抖动状态，如果待苍蝇落定之后，苍蝇拍拍下到打苍蝇结束之后才能算一次特定时间，那么之前没拍下之前都不算一次完整的特定时间；直到我们拍打住苍蝇为止；

**<font color="#2dabff" size="4">函数节流：</font>**就是等苍蝇落稳了，我们进行一次拍打动作，此时苍蝇飞走了，但是，你觉得拍打下去的时候，可能伤到它，该死的苍蝇就不会在电视上乱飞，干扰你看电视，所以你毅然决然的把拍打到了电视屏幕上**（拍打一次算一次特定的时间，此时动作完成了）。**
>对应的解释：还是拍打一次算一次的特定时间，即使苍蝇飞走了，但是苍蝇拍拍打下之后，有可能伤及到苍蝇，或者苍蝇不再讨厌的在电视屏幕上乱飞，我们不像防抖那样，重新归为计算，我们要直接把苍蝇拍拍下，完成一次特定时间的拍打动作，这期间苍蝇又飞到别的地方，我们重新开始一次特定时间的拍打苍蝇动作。打住苍蝇算一次函数成功执行，那么之前没打住苍蝇的过程都只能是一次动作，但是没有完成拍打苍蝇的动作。

### 3. 总结
我们只要记住，拍打一次苍蝇为一个特定的时间，函数防抖就是，苍蝇一直飞来飞去，我们一直没有完成一次特定时间，苍蝇飞走一次，我们重新拍打一次算特定时间的开始，直到拍打苍蝇结束为一次计算时间的周期，之前没有拍下的动作周期都结束重新开始；函数节流就是，不管苍蝇飞走了还是没有飞走，都要拍打一次，这样有可能对苍蝇造成伤害，就算一次计算时间的周期；

英文单词记不记得住，哦，这个不在我的教学范围内。我也记不住！如果记不住，那就只记住一个，那记不住的就是另一个！这是最笨的方法。但是，挺有效的！😃
debounces和trottle

